import React, { useReducer, useEffect, useContext } from 'react'
import TodoList from '@/components/todo-redux/todoList'
import TodoHeader from '@/components/todo-redux/todoHeader'
import TodoFooter from '@/components/todo-redux/todoFooter'
import TodoListHooks from '@/components/todo-hooks/todoList'
import TodoHeaderHooks from '@/components/todo-hooks/todoHeader'
import TodoFooterHooks from '@/components/todo-hooks/todoFooter'
import { Reducer } from '@/components/todo-hooks/reducer'
import Store from '@/components/todo-hooks/context'

import css from './index.scss'

const Redux = () => {
    // 获取store数据放置顶层
    const store = useContext(Store)
    const [state, dispatch] = useReducer(Reducer, store)
    return (
        <>
            <p className={css.title}>redux-todos</p>
            <TodoHeader />
            <TodoList />
            <TodoFooter />
            <p className={css.title}>hooks-todos</p>
            <Store.Provider value={{ state, dispatch }}>
                <TodoHeaderHooks />
                <TodoListHooks />
                <TodoFooterHooks />
            </Store.Provider>
        </>
    )
}

export default Redux
